import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import {
    Breadcrumb,
    Container,
    ListGroup,
    Pagination
} from 'react-bootstrap';
import $ from 'jquery';
import queryString from 'query-string';

import { 
    URL
} from '../../config';
import {
    function_get_trash_task,
    function_close_task
} from '../../actions/task';

import './less/list.css'; 

class App extends Component {

    state = {
        pid: queryString.parse(this.props.location.search).pid,
        page: queryString.parse(this.props.location.search).page,
        total: 0
    }

    componentDidMount(){
        function_get_trash_task(this.state.pid, this.state.page, this.props.dispatch, (page, total) => {
            this.setState({
                page,
                total
            });
        });
    }

    handleDelete(taskId, taskTitle, event){
        let r = window.confirm("确定要删除草稿“" + taskTitle + "”？");
        if (r === true){
            event.persist();
            function_close_task(this.state.pid, taskId, ()=>{
                $(event.target).parents(".taskItem").fadeOut();
            });
        }
    }

    render () {
        return (
          <Container>
            <Breadcrumb>
                <Breadcrumb.Item href={URL.main_page}>项目列表</Breadcrumb.Item>
                <Breadcrumb.Item href={URL.project_page + this.props.location.search}>微服务列表</Breadcrumb.Item>
                <Breadcrumb.Item active>草稿</Breadcrumb.Item>
            </Breadcrumb>
            <ListGroup className="taskList">
            {this.props.list.map(item => {
                return (
                    <ListGroup.Item key={item.taskId} className="taskItem">
                        <div className="left">
                            <div className="title">
                                <Link to={URL.addtask_page + "?pid=" + this.state.pid + "&tid=" + item.taskId}>{ item.title }</Link>
                                <i className="icon trash" onClick={this.handleDelete.bind(this, item.taskId, item.title)}>&#xe614;</i>
                            </div>
                        </div>
                        <div className="right">
                            <div className="time">{"提交于 " + item.time}</div>
                        </div>
                    </ListGroup.Item>
                )
            })}
            </ListGroup>
            <Pagination size="lg">
                <Pagination.First href={URL.trashtask_page + "?pid=" + this.state.pid + "&page=1"} title="首页" />
                <Pagination.Prev href={URL.trashtask_page + "?pid=" + this.state.pid + "&page=" + (this.state.page - 1)} title="上一页" disabled={this.state.page <= 1} />
                <Pagination.Next href={URL.trashtask_page + "?pid=" + this.state.pid + "&page=" + (this.state.page + 1)} title="下一页" disabled={this.state.page >= this.state.total} />
                <Pagination.Last href={URL.trashtask_page + "?pid=" + this.state.pid + "&page=" + (this.state.total)} title="最后一页" />
            </Pagination>
          </Container>
        )
    }          
}

function mapStateToProps (state) {
    return {
        list: state.tasks.trashTasks
    }
  }
  
  export default connect(mapStateToProps)(App);